<template>
  <div class="database-query p-4">
    <!-- 页面标题 -->
    <div class="mb-4">
      <h2 class="text-lg font-medium">数据库查询</h2>
    </div>

    <!-- 标签页切换 -->
    <el-tabs v-model="activeTab" class="bg-white p-4 rounded-lg shadow-md">
      <el-tab-pane label="历史记录" name="history">
        <!-- 历史记录列表 -->
        <div class="history-list">
          <div class="mb-4 flex items-center gap-4">
            <el-date-picker
              v-model="dateRange"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              class="w-80"
            />
            <el-button type="primary" @click="handleSearch">查询</el-button>
            <el-button type="danger" @click="handleDelete">删除</el-button>
          </div>

          <!-- 历史记录表格 -->
          <ArtTable
            :data="historyList"
            :loading="loading"
            border
            stripe
            @row-click="handleRowClick"
          >
            <el-table-column type="selection" width="55" />
            <el-table-column label="序号" type="index" width="80" align="center" />
            <el-table-column prop="sqls" label="SQL语句" min-width="300" show-overflow-tooltip />
            <el-table-column
              prop="createTime"
              label="创建时间"
              width="180"
              align="center"
              sortable
            />
          </ArtTable>

          <!-- 分页 -->
          <div class="mt-4 flex justify-end">
            <el-pagination
              v-model:current-page="currentPage"
              v-model:page-size="pageSize"
              :total="total"
              :page-sizes="[10, 20, 50]"
              layout="total, sizes, prev, pager, next"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </div>
      </el-tab-pane>

      <el-tab-pane label="数据库查询" name="query">
        <!-- SQL编辑器 -->
        <div class="query-editor mb-4">
          <el-input
            v-model="sqlQuery"
            type="textarea"
            :rows="6"
            placeholder="请输入SQL语句"
            class="mb-4"
          />
          <div class="flex gap-4">
            <el-button type="primary" @click="handleExecute">
              <div class="i-carbon-play-filled mr-1" />
              执行
            </el-button>
            <el-button type="success" @click="handleSave">
              <div class="i-carbon-save mr-1" />
              保存
            </el-button>
          </div>
        </div>

        <!-- 查询结果 -->
        <div v-if="queryResult.length > 0" class="query-result">
          <h3 class="text-base font-medium mb-4">查询结果：</h3>
          <ArtTable :data="queryResult" border stripe height="400">
            <el-table-column
              v-for="(col, index) in tableColumns"
              :key="index"
              :prop="col"
              :label="col"
              min-width="120"
              show-overflow-tooltip
            />
          </ArtTable>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'

// 当前激活的标签页
const activeTab = ref('history')

// 历史记录相关数据
const loading = ref(false)
const dateRange = ref([])
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)

// 模拟历史记录数据
const historyList = ref([
  {
    sqls: 'select * from gxbg0101 where ID=\'1099\'',
    createTime: '2023-05-09 10:00:55'
  },
  {
    sqls: 'select * from gxxx0150',
    createTime: '2021-04-09 23:25:38'
  },
  {
    sqls: 'select * from gxbg0101',
    createTime: '2019-11-15 11:56:14'
  }
])

// SQL查询相关数据
const sqlQuery = ref('')
const queryResult = ref([])
const tableColumns = ref([])

// 搜索历史记录
const handleSearch = () => {
  loading.value = true
  setTimeout(() => {
    loading.value = false
  }, 500)
}

// 删除历史记录
const handleDelete = () => {
  ElMessage.success('删除成功')
}

// 点击历史记录行
const handleRowClick = (row: any) => {
  sqlQuery.value = row.sqls
  activeTab.value = 'query'
}

// 执行SQL查询
const handleExecute = () => {
  if (!sqlQuery.value) {
    ElMessage.warning('请输入SQL语句')
    return
  }

  loading.value = true
  // 模拟查询结果
  setTimeout(() => {
    const mockData = [
      {
        ID: '16253236309627494',
        性别: '2',
        姓名: '旺旺旺',
        出生日期: '2002-02-24 00:00:00',
        籍贯: '山西省临汾市',
        名族码: '01',
        国籍地区码: 'CHN'
      },
      {
        ID: '16253656672840376',
        性别: '1',
        姓名: '李春治',
        出生日期: '2004-01-26 00:00:00',
        籍贯: '浙江省嘉兴市',
        名族码: '01',
        国籍地区码: 'CHN'
      }
    ]
    queryResult.value = mockData
    tableColumns.value = Object.keys(mockData[0])
    loading.value = false
  }, 500)
}

// 保存SQL语句
const handleSave = () => {
  if (!sqlQuery.value) {
    ElMessage.warning('请输入SQL语句')
    return
  }
  ElMessage.success('保存成功')
}

// 分页方法
const handleSizeChange = (val: number) => {
  pageSize.value = val
  // TODO: 重新加载数据
}

const handleCurrentChange = (val: number) => {
  currentPage.value = val
  // TODO: 重新加载数据
}

onMounted(() => {
  // TODO: 加载初始数据
})
</script>

<style scoped>
.database-query {
  .query-editor {
    .el-textarea {
      font-family: Monaco, Menlo, Consolas, 'Courier New', monospace;
      font-size: 14px;
    }
  }

  .query-result {
    background-color: #fff;
    padding: 20px;
    border-radius: 4px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }
}
</style> 